<template>
    <view class="">
        <view class="tab ls-f-ac ls-f-ajsb">
            <view class="item ls-f-ajc"
                  :class="currentIndex==0?'sel':''"
                  @click="sel(0)">校内工作记录</view>
            <view class="item ls-f-ajc"
                  :class="currentIndex==1?'sel':''"
                  @click="sel(1)">课后反馈</view>
        </view>
        <scroll-view v-if="list.length>0"
                     scroll-y="true"
                     style="height: calc( 100vh - 44px );">
            <view class="list">
                <view class="card"
                      v-for="item in list"
                      @click="goto(item)">
                    <view class="ls-f-ac">
                        <image src="@/static/images/common_icon_school_small@3x.png"
                               class="icon"
                               mode=""></image>
                        <view class="title">
                            {{item.schoolName||""}}
                        </view>
                    </view>
                    <view class="bottom">
                        <view class="content">
                            {{item.productName||""}}
                        </view>
                        <view class="kehou"
                              v-if="currentIndex==1">
                            <view class="ls-f-ac">
                                <text>课后反馈：</text><text class="f-24">{{item.afterWorkRemake}}</text>
                            </view>
                            <view class="ls-f-ac">
                                <text>作业内容：</text><text class="f-24">{{item.taskComment}}</text>
                            </view>
                        </view>
                        <view class="images ls-f"
                              v-if="currentIndex==0">
                            <view class="ls-f-column"
                                  v-for="ite in item.beforeClassPicArr"
                                  style="margin-left: 16rpx;">
                                <image :src="ite"
                                       class="img"
                                       mode="aspectFill"></image>
                                <view class="f-24 f-over"
                                      style="width: 166rpx;"
                                      v-if="currentIndex==0">课前教室检查</view>
                            </view>
                            <view class="ls-f-column"
                                  v-for="ite in item.afterClassPicArr"
                                  style="margin-left: 16rpx;">
                                <image :src="ite"
                                       class="img"
                                       mode="aspectFill"></image>
                                <view class="f-24 f-over"
                                      style="width: 166rpx;"
                                      v-if="currentIndex==0">课后教室还原</view>
                            </view>
                            <view class="ls-f-column"
                                  v-for="ite in item.checkWorkArr"
                                  style="margin-left: 16rpx;">
                                <image :src="ite"
                                       class="img"
                                       mode="aspectFill"></image>
                                <view class="f-24 f-over"
                                      style="width: 166rpx;"
                                      v-if="currentIndex==0">学生考勤</view>
                            </view>
                        </view>
                        <view class="images ls-f"
                              v-if="currentIndex==1">
                            <view class="ls-f-column"
                                  v-for="ite in item.afterWorkPicArr"
                                  style="margin-left: 16rpx;">
                                <image :src="ite"
                                       class="img"
                                       mode="aspectFill"></image>
                                <view class="f-24 f-over"
                                      style="width: 166rpx;"
                                      v-if="currentIndex==0">课前教室检查</view>
                            </view>
                        </view>
                        <view class="time">
                            {{item.addTime}}
                        </view>
                    </view>

                </view>
            </view>
        </scroll-view>
        <meu-empty v-if="list.length<1"
                   tipText="暂无工作记录"></meu-empty>
        <image src="../../../static/images/gzjl_icon_add@2x.png"
               class="add"
               @click="add"
               mode=""></image>
    </view>

</template>

<script>
export default {
    data() {
        return {
            currentIndex: 0,
            pageSize: 100,
            pageNum: 1,
            list: []
        }
    },
    methods: {
        goto(item) {
            let aa = JSON.stringify(item);
            uni.navigateTo({
                url: "workDetail?item=" + aa + "&type=" + this.currentIndex
            })
        },
        sel(e) {
            this.currentIndex = e
            if (e == 0) {
                this.getBeforeWorkList()
            } else {
                this.getAfterWorkList()
            }
        },
        add() {
            uni.navigateTo({
                url: 'addWork'
            })
        },
        getBeforeWorkList() {
            this.list = []
            let data = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
            }
            this.$api.getBeforeWorkList(data, res => {
                this.list = res.data.list
                console.log("res.data.list", res.data.list)
                for (var i = 0; i < res.data.list.length; i++) {
                    console.log("res.data.list[i].afterClassPicArr", res.data.list[i].afterClassPic)
                    let da = res.data.list[i].afterClassPic.split(",")
                    console.log("dadadada", da)
                    this.list[i].afterClassPicArr = da
                    let de = res.data.list[i].beforeClassPic.split(",")
                    this.list[i].beforeClassPicArr = de
                    let ds = res.data.list[i].checkWork.split(",")
                    this.list[i].checkWorkArr = ds

                }


            })
        },
        getAfterWorkList() {
            let data = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
            }
            this.$api.getAfterWorkList(data, res => {
                this.list = []
                this.list = res.data.list
                console.log("res.data.list", res.data.list)
                for (var i = 0; i < res.data.list.length; i++) {
                    let da = res.data.list[i].afterWorkPic.split(",")
                    this.list[i].afterWorkPicArr = da
                    let de = res.data.list[i].taskPic.split(",")
                    this.list[i].taskPicArr = de

                }


            })
        }
    },
    onLoad() {
        // this.getBeforeWorkList()
    },
    onShow() {
        if (this.currentIndex == 0) {
            this.getBeforeWorkList()
        } else {
            this.getAfterWorkList()
        }
    }
}
</script>

<style scoped lang="scss">
.add {
    width: 164rpx;
    height: 164rpx;
    position: fixed;
    right: 20rpx;
    bottom: 70rpx;
}

.kehou {
    margin-left: 20rpx;
    margin-bottom: 10rpx;
}

.list {
    margin-left: 32rpx;

    .bottom {
        margin-left: 50rpx;
        margin-top: 10rpx;
        margin-bottom: 32rpx;
    }

    .time {
        margin-top: 32rpx;
        color: #999999;
        font-size: 24rpx;
        margin-left: 20rpx;
    }
    .content {
        margin-left: 10rpx;
        font-size: 24rpx;
        color: #999;
        margin-bottom: 20rpx;
    }
    .title {
        font-weight: bold;
        font-size: 36rpx;
    }
    .img {
        border-radius: 15rpx;
        margin-top: 16rpx;
        width: 170rpx;
        height: 170rpx;
    }

    .card {
        margin-top: 26rpx;
        width: 686rpx;
        padding: 32rpx 32rpx 10rpx 32rpx;
        background: #ffffff;
        border-radius: 32rpx;
        .icon {
            margin-right: 16rpx;
            width: 48rpx;
            height: 48rpx;
        }

        .images {
            flex-wrap: wrap;
        }
    }
}

.tab {
    background-color: #fff;
    width: 750rpx;
    padding: 12rpx 32rpx;

    .item {
        width: 336rpx;
        height: 64rpx;
        background: #f5f5f5;
        color: #333;
        font-size: 28rpx;
        border-radius: 16rpx;
    }

    .sel {
        color: #63b9f2 !important;
        border: 2px solid #63b9f2 !important;
    }
}
</style>
